<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.p1 {
				background-color: yellow;
			}

			p {
				background-color: blue;
			}

			#p2 {
				background-color: green;
			}

			/**
			 * 2/34课
			 * 当时用不同的选择器，选中同一个元素，并且设置相同的样式
			 * 样式之间产生了冲突。
			 *
			 * 优先级的规则：
			 * 内联样式，优先级 1000。
			 *	- 不推荐使用，写了没法改。 例如：style="background-color: skyblue;"
			 *	- 特殊情况，可以在样式的最后添加一个!important，获得最高优先级，甚至超过内联样式。
			 *	- 开发中尽量避免使用“!important”
			 *
			 * id选择器，优先级 100
			 * 类和伪类，优先级 10
			 * 元素选择器，优先级 1
			 * 通配*，优先级 0
			 * 继承的样式，没有优先级
			 * 
			 * 当选择器中包含多种选择器，需要将多种选择器的优先级“相加”			 
			 *	但是注意，选择器优先级计算不会超过他的最大的数量级。
			 *	例如：11个id选择器（一个id是100优先级），理论上加起来是110，实际上最大就是100。
			 * 	
			 *	并集选择器的优先级是单独计算
			 *	div,p,#p1,.hello{}
			 *	这是“并集”的写法，优先级是单独计算的。
			 */

			* {
				font-size: 3.125rem;
			}

			p {
				font-size: 1.875rem;
			}

			#p2 {
				background-color: hotpink;
			}

			p#p2 {
				background-color: black;
			}
			
			.p3{
				color: yellow;
			}
			
			.p1{
				color: green;
				background-color: #FFC0CB !important;
			}
			
			
		</style>
	</head>
	<body>
		<!-- 这个背景最终显示 绿色 -->
		<p class="p1" id="p2" style="background-color: skyblue;">
			<!-- 元素标签的优先级大于通配符*。“一个段落”的字体大小为1.875rem -->
			一个段落
			<!-- *的优先级>继承的样式。那么这里的字体大小为3.125rem -->
			<span>p标签中的span</span>
		</p>
		
		<!-- 
		优先级:如果选择器的样式一样，则选择写在后面的样式。
		不是指class="p1 p3"中的后面的p3，而是上面style中的
		写在后面的p1
		-->
		<p class="p1 p3" id="p2">
			选择器权重相加2
		</p>

		<p id="p2">
			选择器权重相加1
		</p>
	</body>
</html>
